<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>JS同步异步</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    
    <script type="text/javascript">
        /* 
        JS 单线程运行的，浏览器提供了异步能力  onclick/setTimeout  WEB API

        同步：同一时间只能做一件事，烧水10min  切菜3min  下面条2min，容易出现阻塞
        异步：同一时间可以做多件事，烧水（切菜），下苗条

        事件轮询：Event Loop => 查询执行栈是否为空，从消息队列中找到异步信息，压入执行栈执行
        消息队列：异步任务（按顺序）执行完，添加到消息队列中    宏任务/微任务
        */

        console.log("start");

        // 1. 声明实例
        var xhr = new XMLHttpRequest();
        // 2. 设置返回参数类型
        // xhr.responseType = "json";
        // 3. 设置请求过程监听函数
        xhr.onreadystatechange = function (){
            // 如果请求过程完成且HTTP状态为成功
            if(xhr.readyState == 4 && xhr.status == 200){
                console.log(xhr.response);
            }
        }
        // 4. 设置请求相关内容
        xhr.open("GET", "https://international.v1.hitokoto.cn");
        // 5. 发送请求
        xhr.send(null);

        console.log("end");



        /* console.log("start");

        var startTime = Date.now();
        setTimeout(function (){
            console.log("1s later", Date.now() - startTime);
        }, 1000);

        console.log("end"); */


    </script>
</body>
</html>